<template>
	<div id="account_center">
		<el-radio-group class="headradioBtn_type" v-model="headradioBtn_type.radio"   @change="headradioBtnchange_type">
			<el-radio-button label="account" class="first">账户中心</el-radio-button>
			<el-radio-button label="charge" class="last">充值明细</el-radio-button>
		</el-radio-group>
		<div class="main-title">{{mainTitle}}</div>
		<div class="box-chargeForSchool" v-show="headradioBtn_type.radio=='account'">
			<div class="box-accountMoney">
				<span style="font-size:0.22rem;width: 100%;padding-left: 0.08rem;">充值收入</span>
				<span style="font-size:0.48rem;">￥{{accountMoney}}</span>
			</div>
			<div class="box-payBtn">
				<el-button v-if="hasApi('vipReCharge')" @click="showSearchStudent">会员充值</el-button>
			</div>
		</div>
		<div class="content" v-show="headradioBtn_type.radio!='allorders'">
			<div class="headmenu">
				<!-- 账户中心  -->
				<div class="box-innerPane" v-show="headradioBtn_type.radio=='account'">
					<!-- 近期充值记录 -->
					<div class="row" style="margin-top:0rem;">
						<div class="row" style="margin-bottom: 0.25rem;">
							<span style="color:#333333;font-size:0.2rem;font-weight:bold;">近期充值记录</span>
						</div>
						<div class="row" >
							<el-table
								:data="chargeRecordList"
								stripe
								style="width: 100%">
								<el-table-column
								prop="accountDate"
								align="center"
								label="充值日期">
								</el-table-column>
								<el-table-column
								prop="studentName"
								align="center"
								label="学员">
								</el-table-column>
								<el-table-column
								prop="studentCardName"
								align="center"
								label="会员卡">
								</el-table-column>
								<el-table-column
								prop="rechargeMoney"
								align="center"
								label="充值金额">
									<template slot-scope="scope">
										￥{{scope.row.rechargeMoney}}
									</template>
								</el-table-column>
								<el-table-column
								align="center"
								label="充值方式">
									<template slot-scope="scope">
										{{accountPayModeMatch[scope.row.accountPayMode]}}
									</template>
								</el-table-column>
								<el-table-column
								prop="accountNo"
								width="250"
								align="center"
								label="交易号">
								</el-table-column>
								<el-table-column
								prop="createUserName"
								align="center"
								label="操作人">
								</el-table-column>
							</el-table>
						</div>
						<div class="row" style="text-align:center;">
							<el-pagination
								:page-size="searchParam.pageSize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="searchParam.total"
								:current-page="searchParam.currPage"
								@current-change="commCurrentPageChange"
								@size-change="commhandleSizeChange">
							</el-pagination>
						</div>
					</div>
				</div>
				<!-- 充值明细 -->
				<div class="box-innerPane" v-show="headradioBtn_type.radio=='charge'">
					<div class="row">
						<el-date-picker
							class="comSearchInput"
							v-model="selectTimeComm"
							type="datetimerange"
							range-separator="至"
							align="center"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							@change="changeTimeComm"
							:default-time="['00:00:00', '00:00:00']">
						</el-date-picker>
						<div class="search_btn"  @click="getChargeRecord()">搜索</div>
					</div>
					<div class="row" style="margin-top:0.16rem;">
						<el-table
							:data="chargeRecordList"
							stripe
							style="width: 100%">
							<el-table-column
							prop="accountDate"
							align="center"
							label="充值日期">
							</el-table-column>
							<el-table-column
							prop="studentName"
							align="center"
							label="充值学员">
							</el-table-column>
							<el-table-column
							prop="studentCardName"
							align="center"
							label="会员卡">
							</el-table-column>
							<el-table-column
							prop="effectiveDateStr"
							align="center"
							width="250"
							label="会员权益有效期">
							</el-table-column>
							<el-table-column
							prop="accountPayMode"
							align="center"
							label="充值方式">
								<template slot-scope="scope">
									{{accountPayModeMatch[scope.row.accountPayMode]}}
								</template>
							</el-table-column>
							<el-table-column
							prop="accountNo"
							width="250"
							align="center"
							label="交易号">
							</el-table-column>
							<el-table-column
							prop="createUserName"
							align="center"
							label="操作人">
							</el-table-column>
							<el-table-column
							align="center"
							label="操作">
								<template slot-scope="scope">
									<el-button type="text" @click="showVipDetail(scope.row)" style="font-size:0.16rem;">详情</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div class="row" style="text-align:center;">
						<el-pagination
							:page-size="searchParam.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="searchParam.total"
							:current-page="searchParam.currPage"
							@current-change="commCurrentPageChange"
							@size-change="commhandleSizeChange">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<!-- 会员充值 -->
		<el-dialog class="studentRechargePopup" :modal="false" :title="'会员充值'" :visible.sync="studentRechargePopupVisible"
			:close-on-click-modal="false">
			<studentRecharge ref="studentRecharge" @cancel="studentRechargePopupVisible=false;" @chargeOk="init()">
			</studentRecharge>
		</el-dialog>
		<!-- 学员搜索框 -->
        <el-dialog
          class="searchStudentPopup"
          :modal="false"
          :close-on-click-modal="false"
          title="会员充值"
          :visible.sync="searchStudentPopup.visible"
          v-loading.fullscreen.lock="searchStudentPopup.loading"
          element-loading-background="rgba(0, 0, 0, 0.1)"
         >
          <div class="box-studentSearch">
            <div class="txt">选择充值学员</div>
            <div class="rowbox">
              <el-input
                class="inputtxt"
                style="font-size:0.16rem;"
                placeholder="请输入关键字"
                v-model="searchStudentPopup.keywords"
                clearable
				ref="student_keywords"
                @keyup.enter.native="searchStudent"
              ></el-input>
              <el-button class="resetElement" type="primary" @click="searchStudent">查询</el-button>
            </div>
            <template>
              <el-table
                :data="searchStudentPopup.tableData"
                border
                max-height="240"
                style="width: 100%;font-size:0.16rem;"
                class="table"
                highlight-current-row
                @current-change="student_handleCurrentChange"
              >
                <el-table-column prop="student" label="学员"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
              </el-table>
            </template>
            <div class="rowbox" v-if="searchStudentPopup.tooMuchShow" style="text-align:right;margin:0.08rem 0;">
              <span>搜索结果过多，只展示前{{searchStudentPopup.tooMuchSize}}条</span>
            </div>
            <div class="rowbox bottom">
              <el-button  class="resetElement" type="primary" @click="searchStudentPopup.visible=false">取消</el-button>
              <el-button
                 class="resetElement" type="primary"
                :disabled="searchStudentPopup.nextbtn"
                @click="showstudentRecharge"
              >进入充值</el-button>
            </div>
          </div>
        </el-dialog>
		<!-- 会员信息 -->
		<el-dialog class="vipdetailPopup" :title="'会员信息'" :visible.sync="vipdetailPopupVisible"
			:close-on-click-modal="false">
			<vipdetail ref="vipdetail" @cancel="vipdetailPopupVisible=false;" ></vipdetail>
		</el-dialog>
	</div>
</template>

<script>
	import studentRecharge from './common/student_recharge'
	import vipdetail from './common/vip_detail'
	import getVipCardEndDate from '@keer/js/vip_manage/vip_card_date.js'
	let vm;
	export default{
		components:{studentRecharge,vipdetail},
		// props:[''],
		data(){
			return {
				mainTitle:'账户中心',
				accountMoney:0,
				headradioBtn_type:{
					radio:'account'
				},
				selectTimeComm:null,
				searchParam:{
					campusId:this.$store.state.campusId,
					startTime:'',
					endTime:'',
					pageSize:10,
					currPage:1,
					total:0,
				},
				chargeRecordList:[],
				/**利用disableOperationByRole函数匹配后得到，可将其他角色归类至userLevel
				 * @param 1: 默认为机构
				 * @param 2：默认为校区
				 */
				userLevel:-1,
				studentRechargePopupVisible:false,
				vipdetailPopupVisible:false,
				accountPayModeMatch:{},
				searchStudentPopup:{
					visible:false,
					loading:false,
					keywords:'',
					tableData:[],
					studentDataList:[],
					selectStudent:null,
					tooMuchShow:false,
					tooMuchSize:20,
					nextbtn:true,
				}
			};
		},
		methods:{
			campusChange : function(campusId) { //校区改变
				this.searchParam.campusId=campusId;
				this.init();
			},
			/**根据角色权限限制操作 */
			disableOperationByRole() {
				switch (this._userInfo.roleMode) {
					//超级管理员
					case 0: {
					
						break;
					}
					//机构管理员
					case 1: {
						this.userLevel=1;
						break;
					}
					//校区管理员
					case 2: {
						this.userLevel=2;
						break;
					}
				}
				
			},
			init(){
				this.headradioBtn_type.radio='account';
				this.studentRechargePopupVisible=false;
				this.mainTitle='账户中心';
				//近30日数据
				let timeobj=tool.getTimeObjByType(330);
				this.searchParam.startTime=timeobj.startTime;
				this.searchParam.endTime=timeobj.endTime;

				this.getChargeRecord(1);
				this.getAccountMoney();
			},
			/**查询账户余额 */
			getAccountMoney(){
				api.campusInfo({campusId:this.$store.state.campusId}).then(function(d){
					if(d.result=='操作成功'){
						vm.accountMoney=d.campus.studentAccountMoney||0;
					}
				});
			},
			/**查询充值记录 */
			getChargeRecord(pageNum){
				this.searchParam.currPage=pageNum||1;
				api.vipChargeRecord(this.searchParam).then(function(d){
					if(d.result=='操作成功'){
						vm.chargeRecordList=d.list;
						vm.formateRecord(vm.chargeRecordList);
						vm.searchParam.total=d.totalCount;
					}
				});
			},
			formateRecord(data){
				for(let i=0;i<data.length;i++){
					let row=data[i];
					// let time=getVipCardEndDate(row.effectiveDate,row.vipCardMode,'.');
					row.effectiveDateStr=row.effectiveDate.substr(0,10)+' 至 '+row.effectiveDateEnd.substr(0,10);
					// row.effectiveDateStart=start;
					// row.effectiveDateEnd=end;
				}
			},
			headradioBtnchange_type(d){
				let match={'account':'账户中心','charge':'充值明细'};
				this.mainTitle=match[d];
				this.searchParam.startTime='';
				this.searchParam.endTime='';
				this.searchParam.pageSize=10;
				if(d=='account'){
					//近30日数据
					let timeobj=tool.getTimeObjByType(330);
					this.searchParam.startTime=timeobj.startTime;
					this.searchParam.endTime=timeobj.endTime;
					this.getChargeRecord(1);
				}
				else if(d=='charge'){
					this.getChargeRecord(1);
				}
				this.selectTimeComm=null;
				this.studentRechargePopupVisible=false;
			},
			
			/**会员充值 */
			showstudentRecharge(){
				this.searchStudentPopup.visible=false;
				this.studentRechargePopupVisible=true;
				this.$nextTick(()=>{
					this.$refs.studentRecharge.initByData(this.searchStudentPopup.selectStudent);
				});
			},
			commCurrentPageChange(d){
				this.getChargeRecord(d);
			},
			commhandleSizeChange(val){
				this.searchParam.pageSize=val;
				this.getChargeRecord(1);
			},
			changeTimeComm(d){
				let start,end;
				if(d)
				{
					start=tool.DateToString(d[0], "yyyy-MM-dd HH:mm");
					end=tool.DateToString(d[1], "yyyy-MM-dd HH:mm");
					this.searchParam.startTime=start;
					this.searchParam.endTime=end;
				}
				else{
					// let newparam={};
					// for(let k in this.searchParam){
					// 	if(k=='startTime'||k=='endTime')continue;
					// 	newparam[k]=this.searchParam[k];
					// }
					// this.searchParam=newparam;
					this.searchParam.startTime='';
					this.searchParam.endTime='';
				}
			},
			/**展示搜索框 */
			showSearchStudent(){
				//重置数据
				this.searchStudentPopup.tableData=[];
				this.searchStudentPopup.studentDataList=[];
				this.searchStudentPopup.nextbtn=true;
				this.searchStudentPopup.keywords='';
				this.searchStudentPopup.selectStudent=null;
				this.searchStudentPopup.tooMuchShow=false;
				this.searchStudentPopup.visible=true;
			},
			/**搜索充值学员 */
			searchStudent() {
				let searchname = this.searchStudentPopup.keywords;
				//验证规则
				var rules = [
					{
						judge: tool.judge("empty", searchname),
						focus: this.$refs.student_keywords,
						tips: "关键字不可为空！"
					}
				];
				if (!tool.validate(rules)) {
					return;
				}
				this.searchStudentPopup.tableData = [];
				this.searchStudentPopup.loading = true;
				api.auditionClueList({ 
					campusId: this.searchParam.campusId,
					keyword: searchname,
					classId:'',
					// courseId:'',
					classSyllabusId: '',
					currPage:1,
					pageSize:this.searchStudentPopup.tooMuchSize
				}).then(function(d) {
					if (d.result == "操作成功") {
						// debugger
						let studentList = d.list;
						vm.searchStudentPopup.tooMuchShow=false;
						if(d.totalCount>vm.searchStudentPopup.tooMuchSize){
							vm.searchStudentPopup.tooMuchShow=true;
						}
						vm.searchStudentPopup.studentDataList = studentList;
						let now = new Date();
						let year = now.getFullYear(),
						month = now.getMonth() + 1,
						day = now.getDate();
						for (let i = 0; i < studentList.length; i++) {
							let row = studentList[i];
							let phone = row.phone;
							//方法二
							let age = tool.minusDate(row.birthday);
							vm.searchStudentPopup.tableData.push({
								student: row.realName + "(" + (row.gender == 1 ? "男" : "女") + ")",
								age: age,
								phone: phone,
								key: i
							});
						}
						//清空上次选择
						vm.searchStudentPopup.selectStudent = null;
						vm.searchStudentPopup.nextbtn = true;
					}
					vm.searchStudentPopup.loading = false;
				})
				.catch(function() {
					vm.searchStudentPopup.loading = false;
				});
			},
			/**续费弹窗-表格选中 */
			student_handleCurrentChange(currentRow) {
				if (!currentRow) return;
				let index = currentRow.key;
				this.searchStudentPopup.selectStudent = this.searchStudentPopup.studentDataList[index];
				this.searchStudentPopup.nextbtn = false;
			},
			/**详情 */
			showVipDetail(row){
				this.vipdetailPopupVisible=true;
				this.$nextTick(()=>{
					let param={
						clueId:row.clueId,
						studentInfo:{
							name:row.studentName,
							gender:row.studentGenderMode,
							phone:row.studentPhone,
							vipCardNo:row.vipCardNo,
							photo:row.studentPhoto
						},
					};
					this.$refs.vipdetail.init(param);
				});
			}
		},
		mounted(){
			vm=this;
			this._userInfo = tool.getItem(lsKey.user, true); //得到当前用户信息
			this.accountPayModeMatch=tool.getDictNameByValue(-100,'account_pay_mode',false);
			this.disableOperationByRole();
			this.init();
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss">
	#account_center{
		color: #333333;
		.headmenu{
			.el-tabs__header{
				display: none !important;
			}
			.el-tabs__item{
				font-size: 0.25rem !important;
				height: 0.6rem !important;
				line-height: 0.6rem !important;
			}
		}
		.headradioBtn_type{
			width: 8rem;
			position: absolute;
			top: -0.8rem;
			left: .45rem;
			.el-radio-button{
				margin-left: 0.5rem !important;
			}
			.el-radio-button.first{
				margin-left: 0rem !important;
			}
			.el-radio-button__inner{
				width: 1.2rem !important;
				// border-top: 0;
				// border-bottom: 0;
				height: 0.60rem !important;
				line-height: 0.25rem !important;
				font-size: 0.18rem !important;
				border: unset !important;
				border-radius:unset !important;
				background: unset !important;
				color: unset !important;
				line-height: 0.45rem !important;
    			font-size: 0.2rem !important;
			}
			.el-radio-button__orig-radio:checked + .el-radio-button__inner{
				box-shadow:unset !important;
				font-weight: bold !important;
				border-bottom: 0.03rem solid #3885f8 !important;
			}

		}
		.main-title{
			margin:  0.25rem auto;
			min-width: 15.48rem;
			width: 15.48rem;
			margin-top: 0.34rem;
			width: 15.48rem;
			font-size: 0.25rem;
			font-weight: bold;
		}
		.box-chargeForSchool{
			margin:  0.25rem auto;
			margin-bottom: 0;
			min-width: 15.48rem;
			width: 15.48rem;
			padding: 0 0.66rem;
			height: 1.9rem;
			background: rgb(65,137,245);
			border: 0.01rem solid #ededed;
			border-radius: 0.10rem;
			box-shadow: 0 0.02rem 0.04rem 0 #3885f81f, 0 0 0.04rem 0 #3885f81f;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.box-accountMoney{
				width: 8rem;
				height: 50%;
				color: #FFFFFF;
				display: flex;
				flex-wrap: wrap;
			}
			.box-payBtn{
				// height: 50%;
				.el-button{
					width: 2.18rem !important;
					height: 0.48rem !important;
					background-color: transparent !important;
					color: #FFFFFF !important;
					font-size: 0.22rem !important;
				}
			}
		}
		.content{
			margin:  0.14rem auto;
			min-width: 15.48rem;
			width: 15.48rem;
			padding: 0.2rem 0.32rem 0.2rem 0.32rem;
			height: auto;
			background: #fff;
			border: 0.01rem solid #ededed;
			border-radius: 0.10rem;
			box-shadow: 0 0.02rem 0.04rem 0 #3885f81f, 0 0 0.04rem 0 #3885f81f;
			.box-innerPane{
				width: 100%;
				min-height: 4.7rem;
				padding: 0 0.16rem;
				.row{
					width: 100%;
					min-height: 0.16rem;
					margin: 0.08rem 0;
				}
				.orderObj{
					width: 100%;
					padding: 0.16rem 0.3rem;
					margin-bottom: 0.14rem;
					background: #fff;
					border: 0.01rem solid #dcdfe6;
					border-radius: 0.1rem;
					-webkit-box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
					box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
					.courseinfo{
						display: flex;
						margin-bottom: 0.12rem;
						.cloumn{
							width: 15%;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.namebox{
							display: flex;
							flex-direction: column;
							align-items: flex-start;
    						padding-left: 0.1rem;
							.className{
								margin-bottom: 0.05rem;
								font-size: 0.22rem;
								font-weight: bold;
							}
						}
					}
				}
				.orderObj.searchbox{
					display: flex;
					justify-content: space-between;
				}
				.orderType{
					.el-radio-button__inner{
						font-size: 0.18rem !important;
					}
					.el-radio-button.first{
						margin-left: 0rem !important;
					}
					.el-radio-button__inner{
						width: 1.2rem !important;
						// border-top: 0;
						// border-bottom: 0;
						height: 0.60rem !important;
						line-height: 0.25rem !important;
						font-size: 0.18rem !important;
						border: unset !important;
						border-radius:unset !important;
						background: unset !important;
						color: unset !important;
						line-height: 0.45rem !important;
						font-size: 0.2rem !important;
					}
					.el-radio-button__orig-radio:checked + .el-radio-button__inner{
						box-shadow:unset !important;
						font-weight: bold !important;
						border-bottom: 0.03rem solid #3885f8 !important;
					}
				}
			}
		}
		.el-table,.el-button,.el-input,.el-pager li{
			font-size: 0.16rem !important;
		}
		.studentRechargePopup.el-dialog__wrapper {
			top: 0.81rem !important;
			left: 2.1rem !important;
			background: rgba(0,0,0,0.5);
			z-index: 30 !important;
		}
		.searchStudentPopup {
			z-index: 30 !important;
			top: 0.81rem !important;
			left: 2.1rem !important;
			background-color:rgba(0,0,0,0.5) !important;
			.el-dialog {
				width: 8.55rem !important;
				.el-dialog__title{
					font-size: .22rem !important;
					color: #333333 !important;
				}
			}
			.box-studentSearch{
				padding: 0 0.2rem 0 0.2rem;
				.el-table {
					max-height: 2.4rem !important;
					.el-table__body-wrapper {
					max-height: 1.92rem !important;
					}
				}
				.el-table__body tr.current-row > td {
					background-color: #5eabf9;
				}
				.el-button {
					margin: 0.1rem;
				}
				.txt {
					font-size: 0.16rem;
				}
				.rowbox.bottom {
					display: flex;
					justify-content: center;
					.btn {
						margin: 0.1rem 0.5rem;
					}
				}
				.inputtxt {
					width: 2.5rem;
					margin: 0.1rem;
					margin-left: 0;
				}
			}
		}
		.vipdetailPopup{
			.el-dialog{
				width: 12rem;
			}
		}

		//鼠标悬浮
		.hoverpointer:hover{
			cursor: pointer;
		}
		// 滚动条
		.scrollbarstyle::-webkit-scrollbar {
			width: 0.05rem;
		}
		.scrollbarstyle::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.scrollbarstyle::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
		.el-table__body-wrapper::-webkit-scrollbar {
			width: 0.05rem;
		}
		.el-table__body-wrapper::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.el-table__body-wrapper::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
	}
	// 搜索框样式
	.comSearchInput .el-input__inner {
		background-color: #f7f8fa;
		border-radius: 0.08rem;
		font-size: 0.16rem;
		color: #666666;
		height: 0.36rem !important;
		line-height: 0.36rem !important;
		
	}
	.comSearchInput.el-input__inner {
		background-color: #f7f8fa;
		border-radius: 0.08rem;
		font-size: 0.16rem;
		color: #666666;
		height: 0.36rem !important;
		line-height: 0.36rem !important;
		padding: 0 0.1rem !important;
		width: 4.5rem !important;
		.el-range-input{
			font-size: 0.16rem !important;
			color: #666666 !important;
			background-color: #f7f8fa !important;
		}
	}
</style>